<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>教师列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background: #00499e;
        }

        #app {
            padding: 20px;
            background: white;
            border: 15px solid #00499e;
            border-radius: 25px;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            box-sizing: border-box;
            font-size: 14px;
            overflow-y: auto;
        }

        #app.isPc {
            height: auto;
        }

        .primary {
            color: #409EFF;
        }

        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 20px;
            font-size: 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .mobile-table {
            flex: 1;
            height: 96%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .mobile-row i {
            margin-right: 5px;
        }

        .mobile-card {
            margin-bottom: 20px;
        }

        .mobile-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 24px;
            margin-bottom: 10px;
        }

        .mobile-right {
            float: right;
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }

        .mobile-row .el-col {
            margin-top: 10px;
        }

        .pc-pagination {
            padding: 10px;
            text-align: right;
        }

        .tips {
            color: #ddd;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            text-align: center;
        }

        .tips i {
            font-size: 20px;
        }

        .detail {
            font-size: 12px;
            color: #dedede;
            margin-top: 10px;
            margin-bottom: -10px;
            text-align: center;
        }

        .form-select {
            width: 100%;
        }

        .el-message-box {
            width: 80%;
            max-width: 400px;
        }
        .el-dialog {
            max-width: 600px;
        }
    </style>
</head>

<body>
<div id="app" :class="{isPc: !isMobile}">
    <div class="page-header">
        <i style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;" @click="back"
           class="el-icon-back"></i>
        <span style="font-weight: bold;">
            <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>{{title}}
        </span>
        <!--        <i v-if="isMobile" style="float: right;font-size: 20px;color:#1379ff;margin-left: 10px;"-->
        <!--           @click="editTeacher('add')" class="el-icon-plus"></i>-->
        <i v-if="isMobile" style="float: right;font-size: 20px;color:#1379ff;" @click="visible=true"
           class="el-icon-cold-drink"></i>
    </div>
    <div class="pc-table" v-if="!isMobile" v-loading="loading">
        <el-row :gutter="20">
            <el-form ref="form" size="small" label-width="80px" label-position="right">
                <el-col :span="6">
                    <el-form-item prop="qxdm" :label="formMap['qxdm']">
                        <el-cascader
                                :show-all-levels="false"
                                class="form-select" clearable
                                v-model="params.pageparm"
                                placeholder="请选择所属区县"
                                @change="handleChange"
                                :options="types.qxdms"
                                :props="{label: 'dmmc', value: 'dmdm', emitPath: false}"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="xxdm" :label="formMap['xxdm']">
                        <el-select :disabled="!params.pageparm" class="form-select" v-model="params.xxdm" clearable
                                   placeholder="请选择所属学校">
                            <el-option v-for="xx of types.xxdms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="kcdm" :label="formMap['kcdm']">
                        <el-select class="form-select" v-model="params.kcdm" placeholder="请选择任教课程" clearable>
                            <el-option v-for="xx of types.kcdms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="zwdm" :label="formMap['zwdm']">
                        <el-select class="form-select" v-model="params.zwdm" placeholder="请选择学校职务" clearable>
                            <el-option v-for="xx of types.zwdms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="zcdm" :label="formMap['zcdm']">
                        <el-select class="form-select" v-model="params.zcdm" placeholder="请选择学校职务" clearable>
                            <el-option v-for="xx of types.zcdms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="xddm" :label="formMap['xddm']">
                        <el-select class="form-select" v-model="params.xddm" placeholder="请选择任教学段" clearable>
                            <el-option v-for="xx of types.xddms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="xbm" :label="formMap['xbm']">
                        <el-select class="form-select" v-model="params.xbm" placeholder="请选择性别" clearable>
                            <el-option v-for="xx of types.xbms" :key="xx.dmdm" :value="xx.dmdm"
                                       :label="xx.dmmc"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" align="right">
                    <el-button type="primary" size="small" @click="handleSubmit">查询</el-button>
                    <el-button type="info" size="small" @click="handleSet">重置</el-button>
                    <!--                    <el-button type="primary" size="small" @click="editTeacher('add')">新建</el-button>-->
                </el-col>
            </el-form>
        </el-row>
        <el-table :data="list" stripe>
            <el-table-column prop="xm" label="姓名"></el-table-column>
            <el-table-column prop="qxdm" label="区县"></el-table-column>
            <el-table-column prop="xxdm" label="学校"></el-table-column>
            <el-table-column prop="shouji" label="手机"></el-table-column>
            <el-table-column prop="rjkcdm" label="任教课程"></el-table-column>
            <el-table-column prop="xxzwdm" label="学校职务"></el-table-column>
            <el-table-column prop="zcdm" label="职称"></el-table-column>
            <el-table-column prop="csrq" label="出生日期"></el-table-column>
            <el-table-column prop="xddm" label="任教学段"></el-table-column>
            <el-table-column prop="xbm" label="性别"></el-table-column>
            <el-table-column label="操作" width="170px">
                <el-button-group slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editTeacher('show', scope.row)">详情</el-button>
                    <el-button v-if="right.M" type="primary" size="mini" @click="editTeacher('modify', scope.row)"
                               icon="el-icon-edit-outline"></el-button>
                    <el-button v-if="right.D" type="danger" size="mini" icon="el-icon-delete"
                               @click="deleteTeacher(scope.row)"></el-button>
                </el-button-group>
            </el-table-column>
        </el-table>
        <div class="pc-pagination">
            <el-pagination @current-change="changePage" background layout="prev, pager, next"
                           :current-page.sync="params.page" :total="params.total"></el-pagination>
        </div>
    </div>
    <div class="mobile-table" v-else v-infinite-scroll="loadData" infinite-scroll-disabled="disabled">
        <el-card v-for="item of list" :key="item.xuid" class="mobile-card" @click.native="editTeacher('show', item)">
            <div class="mobile-name">
                <span>{{item.xm}}</span>
                <span class="mobile-right">{{item.xxdm}}/{{item.zcdm}}</span>
            </div>
            <el-row class="mobile-row">
                <el-col :span="24">
                    <i class="el-icon-user primary"></i>{{item.xbm}}
                </el-col>
                <el-col :span="12">
                    <i class="el-icon-time primary"></i>{{item.xddm}}
                </el-col>
                <el-col :span="12" align="right">
                    <i class="el-icon-notebook-2 primary"></i>{{item.rjkcdm}}
                </el-col>
                <el-col :span="12">
                    <i class="el-icon-mobile-phone primary"></i>{{item.shouji}}
                </el-col>
                <el-col :span="12" align="right">
                    <i class="el-icon-location-outline primary"></i>{{item.qxdm}}
                </el-col>
            </el-row>
            <div style="text-align: right;margin-top: 15px;">
                <el-button v-if="right.M" type="primary" plain size="mini"
                           @click.prevent.stop="editTeacher('modify', item)"
                           icon="el-icon-edit-outline"></el-button>
                <el-button v-if="right.D" type="danger" plain size="mini" icon="el-icon-delete"
                           @click.prevent.stop="deleteTeacher(item)"></el-button>
            </div>
        </el-card>
        <div v-if="loading" class="tips"><i class="el-icon-loading"></i></div>
        <div v-if="noMore && list.length !== 0" class="tips">—— 我也是有底线的 ——</div>
        <div v-if="!loading && params.total === 0 && list.length === 0" class="tips">暂无数据</div>
    </div>
    <el-dialog :visible.sync="visible" width="90%" title="筛选" append-to-body>
        <el-form ref="form" size="small" label-width="80px" label-position="right">
            <el-form-item prop="qxdm" :label="formMap['qxdm']">
                <el-cascader
                        :show-all-levels="false"
                        class="form-select"
                        v-model="params.pageparm"
                        placeholder="请选择所属区县"
                        @change="handleChange"
                        :options="types.qxdms" clearable
                        :props="{label: 'dmmc', value: 'dmdm', emitPath: false}"></el-cascader>
            </el-form-item>
            <el-form-item prop="xxdm" :label="formMap['xxdm']" clearable>
                <el-select :disabled="!params.pageparm" class="form-select" v-model="params.xxdm" placeholder="请选择所属学校">
                    <el-option v-for="xx of types.xxdms" :key="xx.dmdm" :value="xx.dmdm"
                               :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="kcdm" :label="formMap['kcdm']">
                <el-select class="form-select" v-model="params.kcdm" placeholder="请选择任教课程" clearable>
                    <el-option v-for="xx of types.kcdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="zwdm" :label="formMap['zwdm']">
                <el-select class="form-select" v-model="params.zwdm" placeholder="请选择学校职务" clearable>
                    <el-option v-for="xx of types.zwdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="zcdm" :label="formMap['zcdm']">
                <el-select class="form-select" v-model="params.zcdm" placeholder="请选择学校职务" clearable>
                    <el-option v-for="xx of types.zcdms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="xddm" :label="formMap['xddm']">
                <el-select class="form-select" v-model="params.xddm" placeholder="请选择任教学段" clearable>
                    <el-option v-for="xx of types.xddms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="xbm" :label="formMap['xbm']">
                <el-select class="form-select" v-model="params.xbm" placeholder="请选择性别" clearable>
                    <el-option v-for="xx of types.xbms" :key="xx.dmdm" :value="xx.dmdm" :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin-top: 15px">
            <el-button type="primary" size="small" @click="handleSubmit">查询</el-button>
            <el-button type="info" size="small" @click="handleSet">重置</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            qxdm: '区县',
            xxdm: '学校',
            xm: '姓名',
            shouji: '手机',
            kcdm: '任教课程',
            zwdm: '学校职务',
            zcdm: '职称',
            csrq: '出生日期',
            xddm: '任教学段',
            xbm: '性别'
        };
    new Vue({
        el: '#app',
        data: function () {
            var that = this
            return {
                right: {
                    D: false,
                    M: false,
                    A: false
                },
                formMap,
                title: '教师列表',
                loading: false,
                visible: false,
                pageparm: getQueryString('pageparm'),
                types: {
                    qxdms: [],
                    xxdms: [],
                    kcdms: [],
                    zwdms: [],
                    zcdms: [],
                    xddms: [],
                    xbms: []
                },
                params: {
                    size: 8,
                    page: 1,
                    total: 0,
                    pageparm: '',
                    xxdm: '',
                    kcdm: '',
                    zwdm: '',
                    zcdm: '',
                    xddm: '',
                    xbm: ''

                },
                list: [],
                isMobile: !IsPC()
            }
        },
        computed: {
            noMore() {
                return this.list.length >= this.params.total
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            /**
             * 返回
             */
            back () {
                history.back()
            },
            handleChange(val) {
                if (!val) {
                    this.types.xxdms = []
                } else {
                    this.getTypes('gb-xxdm', val)
                }
                this.params.xxdm = ''
            },
            deleteTeacher(row) {
                var that = this
                this.$confirm('是否确定删除' + row.xm + '?').then(function (flag) {
                    if (flag) {
                        var params = {
                            act: 'Delete',
                            pzluserid: row.pzluserid,
                            pageparm: that.params.pageparm
                        }
                        axios.get(baseUrl + 'PSJS/PSJSWLIST', {params}).then(function (res) {
                            if (res.status === 200) {
                                that.changePage()
                            }
                        })
                    }
                })
            },
            editTeacher(type, row) {
                location.href = './PSJSDETAI.html?type=' + type + '&xuid=' + row.pzluserid
            },
            getTypes(type, dmleft) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type, {params: {dmleft}}).then(function (res) {
                    if (res.status === 200) {
                        if (type === 'gb-qxdm') {
                            var qxdms = [], qxdmMap = {}, second = {}
                            res.data.forEach(function (item) {
                                var key = item.dmdm.substring(0, item.dmdm.length - 2)
                                if (item.dmdm.length === 2) { // 第一层逻辑
                                    if (!qxdmMap[item.dmdm]) {
                                        qxdmMap[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        qxdmMap[item.dmdm].dmdm = item.dmdm
                                        qxdmMap[item.dmdm].dmmc = item.dmmc
                                    }

                                } else if (item.dmdm.length === 4) { // 第二层逻辑
                                    if (!qxdmMap[key]) {
                                        qxdmMap[key] = {
                                            children: []
                                        }
                                    }
                                    if (!second[item.dmdm]) {
                                        second[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        second[item.dmdm].dmdm = item.dmdm
                                        second[item.dmdm].dmmc = item.dmmc
                                    }
                                    qxdmMap[key].children.push(second[item.dmdm])
                                } else {
                                    if (!second[key]) {
                                        second[key] = {
                                            children: []
                                        }
                                    }
                                    second[key].children.push({
                                        dmdm: item.dmdm,
                                        dmmc: item.dmmc
                                    })
                                }
                            })
                            for (var k in qxdmMap) {
                                if (qxdmMap.hasOwnProperty(k) && qxdmMap[k]) {
                                    qxdms.push(qxdmMap[k])
                                }
                            }
                            that.types[type.split('-')[1] + 's'] = qxdms
                        } else {
                            that.types[type.split('-')[1] + 's'] = res.data
                        }
                    }
                })
            },
            getData() {
                var params = {
                    act: 'Rdata',
                    pagesize: this.params.size,
                    pageindex: this.params.page
                }
                for (var key in this.params) {
                    if (this.params.hasOwnProperty(key) && (typeof this.params[key] === 'string') && this.params[key]) {
                        params[key] = this.params[key]
                    }
                }
                return axios.get(baseUrl + 'PSJS/PSJSWLIST', {
                    params: params
                })
            },
            loadData() {
                if (this.loading) return
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    that.loading = false
                    if (res.status === 200 && res.content && res.content.length > 0) {
                        res.content.forEach(function (item) {
                            that.list.push(item)
                        })
                        that.params.total = res.data.total || 0
                    } else {
                        that.list = []
                        that.params.total = 0
                    }
                })
            },
            changePage() {
                if (this.loading) return
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    that.loading = false
                    if (res.status === 200) {
                        that.list = res.data.rows || []
                        that.params.total = res.data.total || 0
                    }
                })
            },
            handleSubmit() {
                this.visible = false
                this.params.page = 1
                this.changePage()
            },
            handleSet() {
                this.params.page = 1
                this.params.pageparm = this.pageparm
                this.params.xxdm = ''
                this.params.kcdm = ''
                this.params.zwdm = ''
                this.params.zcdm = ''
                this.params.xddm = ''
                this.params.xbm = ''
                this.visible = false
                this.changePage()
            },
            resize() {
                this.isMobile = window.innerWidth <= 768
            },
            getInitData() {
                let that = this
                axios.get(baseUrl + 'PSJS/PSJSWLIST', {params: {act: 'pinit'}}).then(function (res) {
                    if (res.status === 200) {
                        that.title = res.data.mkmc || that.title
                        document.title = that.title
                        that.pageparm = res.data.pageparm
                        if (res.data.pageparm) {
                            that.getTypes('gb-xxdm', res.data.pageparm)
                            that.params.pageparm = res.data.pageparm
                        }
                        for (var i = 0; i < res.data.rightid.length; i++) {
                            that.right[res.data.rightid[i]] = true
                        }
                    }
                })
            }
        },
        created() {
            this.changePage()
            this.getTypes('gb-qxdm')
            this.getTypes('xx-kcdm')
            this.getTypes('xx-zwdm')
            this.getTypes('gb-zcdm')
            this.getTypes('gb-xddm')
            this.getTypes('gb-xbm')
            this.getInitData()
        },
        mounted() {
            window.addEventListener('resize', this.resize)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resize)
        }
    })
</script>

</html>